<template>
  <!-- <div class="payment-status" v-cloak> -->
    <!--失败时： 用icon-iconfontguanbi fail替换icon-duihao2 bg-color-red-->
    <!-- <div
      class="iconfont icon-duihao2 bg-color-red"
      v-if="!isWeixin || orderInfo.paid || orderInfo.pay_type == 'offline'"
    ></div>
    <div class="iconfont icon-iconfontguanbi fail" v-else></div> -->
    <!-- 失败时：订单支付失败 -->
    <!-- <div
      class="status"
      v-if="
        (!isWeixin && orderInfo.pay_type == 'weixin') ||
          orderInfo.pay_type == 'offline'
      "
    >
      订单创建成功
    </div>
    <div class="status" v-else-if="orderInfo.paid">订单支付成功</div>
    <div class="status" v-else>订单支付失败</div>
    <div class="wrapper">
      <div class="item acea-row row-between-wrapper">
        <div>订单编号</div>
        <div class="itemCom" v-text="orderInfo.order_id"></div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>下单时间</div>
        <div class="itemCom" v-text="orderInfo.add_time"></div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>支付方式</div>
        <div
          class="itemCom"
          v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 2"
        >
          H5微信支付
        </div>
        <div
          class="itemCom"
          v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 0"
        >
          微信支付
        </div>
        <div class="itemCom" v-if="orderInfo.pay_type == 'yue'">余额支付</div>
        <div class="itemCom" v-if="orderInfo.pay_type == 'offline'">
          线下支付
        </div>
      </div>
      <div class="item acea-row row-between-wrapper">
        <div>支付金额</div>
        <div class="itemCom" v-text="orderInfo.pay_price"></div>
      </div> -->
      <!--失败时加上这个  -->
      <!-- <div
        class="item acea-row row-between-wrapper"
        v-if="
          orderInfo.paid == 0 &&
            orderInfo.pay_type != 'offline' &&
            isWeixin &&
            msgContent
        "
      >
        <div>失败原因</div>
        <div class="itemCom" v-text="msgContent"></div>
      </div>
    </div> -->
    <!--失败时： 重新购买 -->
    <!-- <div v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 2">
      <div class="returnBnt bg-color-red" @click="goPages()">查看支付结果</div>
      <div class="returnBnt cart-color" @click="goPages()">
        支付失败重新支付
      </div>
    </div>
    <div v-else>
      <div class="returnBnt bg-color-red" @click="goPages()">查看订单</div>
      <div class="returnBnt cart-color" @click="goPages('/')">返回首页</div>
    </div>
  </div> -->
   <el-container>
    <el-header height="172px" style="padding:0">
      <HomeNavigation></HomeNavigation>
      <SearchBox></SearchBox>
      <ClassNavigation></ClassNavigation>
    </el-header>
    <el-main class="p-main">
     <div class="p-pay" v-cloak>
     
    
       <p v-if="
        (!isWeixin && orderInfo.pay_type == 'weixin') ||
          orderInfo.pay_type == 'offline'
      ">订单创建成功</p>
       <p class="title" v-else-if="orderInfo.paid">支付订单成功</p>
       <p class="title" v-else  >支付订单失败</p>
       <p class="order">
         交易单号：{{orderInfo.order_id}}
       </p>
       <div class="p-bg">
         <div class="pay2 acea-row">
           <div class="line1">订单编号</div>
           <div class="line2">下单时间</div>
           <div class="line3">支付方式</div>
           <div class="line4">支付金额</div>
         </div>
         <div class="pay3 acea-row">
           <div class="line1">{{orderInfo.order_id}}</div>
           <div class="line2">{{orderInfo.add_time}}</div>
           <div class="line3">
                <div
              v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 2"
            >
              H5微信支付
            </div>
            <div
              v-if="orderInfo.pay_type == 'weixin' && orderInfo.is_channel == 0"
            >
              微信支付
            </div>
            <div v-if="orderInfo.pay_type == 'yue'">余额支付</div>
            <div  v-if="orderInfo.pay_type == 'offline'">
              线下支付
            </div>
           </div>
           <div class="line4">{{orderInfo.pay_price}}</div>
         </div>
       </div>
       <div class="btn  acea-row row-right">
         <div class="btn1"><el-button @click="goPages()"><p>查看订单</p></el-button></div>
         <div ><el-button @click="goPages('/')" ><p>返回首页</p></el-button></div>
       </div>
     </div>
    </el-main>
    <el-footer style="padding: 0;">
    <Foot></Foot>
  </el-footer>
</el-container>
</template>
<script>
import { mapGetters } from "vuex";
import { orderDetail } from "@api/order";
import { isWeixin } from "@utils";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";

const NAME = "PayMentStatus";

export default {
  name: NAME,
  props: {},
  components: {
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  data: function() {
    return {
      id: "",
      status: 0,
      msgContent: "",
      orderInfo: {},
      isWeixin: isWeixin()
    };
  },
  watch: {
    $route(n) {
      if (n.query.msg) this.msgContent = n.query.msg;
      if (n.name === NAME && this.id !== n.params.id) {
        this.id = n.params.id;
        this.status = parseInt(n.params.status);
        this.getOrderInfo();
      }
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  mounted() {
    this.id = this.$route.params.id;
    this.msgContent = this.$route.query.msg;
    this.status = parseInt(this.$route.params.status);
    this.getOrderInfo();
  },
  methods: {
    goPages(route) {
      let routes =
        route !== undefined
          ? route
          : "/order/detail/" + this.orderInfo.order_id;
      if (this.status === 5 && route === undefined) routes = "/order/list/0";
      return this.$router.push({
        path: routes
      });
    },

    getOrderInfo() {
      orderDetail(this.id).then(res => {
        this.orderInfo = res.data;
        console.log("1"+this.orderInfo.paid)
        if (this.isWeixin) {
          document.title = this.orderInfo.paid ? "支付成功" : "支付失败";
        } else {
          document.title = "订单创建成功";
        }
      });
    }
  }
};
</script>
<style  scoped>
  .p-main {
    background-color: #fff;
    padding: 50px;
  }
  .p-main .p-pay {
    width: 1090px;
    margin: 0 auto;
  }
   .p-main .p-pay  .title {
     font-family: "Microsoft Yahei","微软雅黑",verdana;
     color: #333333;
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
    line-height: 1;
    text-align: center;
   }
   .p-main .p-pay  .order {
     font-family: "Microsoft Yahei","微软雅黑",verdana;
     margin-bottom: 10px;
     line-height: 1;
     color: #999;
     font-size: 16px;
   }
  .p-main .p-pay .p-bg{
    width: 1088px;
    border: 1px solid #e8e8e8;
    height: 104px;
  }
  .p-main .p-pay .pay2 {
    height: 42px;
    background-color: #f4f4f4;
    color: #999;
    font-size: 14px;
    line-height: 41px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .p-main .p-pay .pay2 .line1 {
    width: 393px;
  }
  .p-main .p-pay .pay2 .line2 {
    width: 284px;
  }
  .p-main .p-pay .pay2 .line3 {
    width: 224px;
  }
  .p-main .p-pay .pay2 .line4 {
    width: 185px;
  }
  .p-main .p-pay .pay3 {
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #666;
    font-size: 14px;
  }
  .p-main .p-pay .pay3 .line1 {
    width: 393px;
  }
  .p-main .p-pay .pay3 .line2 {
    width: 284px;
  }
  .p-main .p-pay .pay3 .line3 {
    width: 224px;
  }
  .p-main .p-pay .pay3 .line4 {
    width: 185px;
  }
  .p-main .p-pay .btn {
    width: 1090px;
    height: 49px;
    margin-top: 25px;
  }
  .p-main .p-pay .btn p {
    font-size: 16px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
  }
  .p-main .p-pay .btn .btn1 {
    margin-right: 30px;
  }
  .p-main .p-pay .btn >>>.el-button--small {
    padding: 15px 43px;
    color: #b4a078;
    border: 1px solid #b4a078;
    background-color: #f5f3ef;
  }
  .p-main .p-pay .btn >>>.el-button--small:hover {
    background-color: #FFF;
  }
</style>